<template>
  <div>
    <x-header :left-options="{backText: '首页'}" ></x-header>
    <p class="L_title">找回密码</p>

    <flow>
      <flow-state state="1" :title="('验证邮箱')" is-done></flow-state>
      <flow-line :tip="('进行中')"></flow-line>

      <flow-state state="2">
        <span slot="title">{{ ('修改密码') }}</span>
      </flow-state>
      <flow-line></flow-line>

      <flow-state state="3" :title="('完成')"></flow-state>

    </flow>

    <group>
    <x-input title="账号" name="mobile" placeholder="请输入账号" v-model="acc">
          <img slot="label" style="padding-right:10px;display:block;" src="static/img/user.png" width="24" height="24">
    </x-input>
    <x-input title="邮箱" name="email" placeholder="请输入邮箱地址" is-type="email" v-model="email" ref="refemail">
      <img slot="label" style="padding-right:10px;display:block;" src="static/img/email.png" width="24" height="24">
    </x-input>
    </group>
    <div class="L_butbox">
      <button id="L_bt" class="L_button" @click="$router.replace('/Changepsw')" disabled>下一步</button>
    </div>
    <div class="L_foot">
      <router-link class="L_line" :to="'/Registered'" replace><span>没有账号？立即注册</span></router-link>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      acc: '',
      email: '',
    }
  },
  methods:{
    Btclass(){
    var L_btcolor =document.getElementById("L_bt");
    if(this.acc!='' && this.email!='' && this.$refs.refemail.valid){//按钮可用
      L_btcolor.style.color = "white";
      L_btcolor.style.backgroundColor = "#008CBA";
      L_btcolor.disabled=false;
    }
    else if(this.acc=='' || this.email==''){//按钮不可用
      L_btcolor.style.color = "grey";
      L_btcolor.style.backgroundColor = "rgba(211, 211, 211, 0.5)";
      L_btcolor.disabled=true;
    }
    },
  },
  mounted(){
  }, 
  updated(){
    this.Btclass();
  }
}
</script>
<style lang="less" scoped>
.L_line{
text-decoration:none;  /*超链接无下划线*/
}
.L_title{
  font-size: 30px;
  margin-top: 50px;
  margin-left: 30px;
  margin-bottom: 50px;
}
.L_butbox{
  margin-top: 40px;
  text-align: center;
}
.L_button{
  color:grey;
  background-color:rgba(211, 211, 211, 0.5);
  border: none;
  border-radius: 30px;
  padding: 5px 15px;
  font-size: 16px;
  width: 85%;
  height: 40px;
}
.L_foot{
  margin: 20px;
  text-align: center;
}
</style>
